<template>
    <div class="time-select">
        <img src="./../assets/images/calendar-active.svg">
        <a-form layout='inline' :form="form">
            <a-form-item>
                <a-input readOnly
                         v-decorator="['time_range']"
                         @click="openCalendar">
                </a-input>
            </a-form-item>
        </a-form>
        <transition name="slide-fade">
            <div class="time-choose-calendar" :class="{left: direction}" v-show="isActive">
                <div class="arrow"></div>
                <div class="content">
                    <div class="select-content">
                        <a-select v-model="selectedDate.firstYear" @change='handleFirstYear'>
                            <a-select-option v-for="(item, index) in years" :key={index} :value="item">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <a-select v-model="selectedDate.firstMonth" @change='handleFirstMonth'>
                            <a-select-option v-for="(item, index) in months" :key={index} :value="item">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <div class="horizontal-line">- -</div>
                        <a-select v-model="selectedDate.lastYear" @change='handleLastYear'>
                            <a-select-option v-for="(item, index) in years" :key={index} :value="item"
                                             :disabled="parseInt(item) < parseInt(selectedDate.firstYear)">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <a-select v-model="selectedDate.lastMonth" @change='handleLastMonth'>
                            <a-select-option v-for="(item, index) in months" :key={index} :value="item"
                                             :disabled="parseInt(selectedDate.lastYear) === parseInt( selectedDate.firstYear)
                                 && parseInt(item) < parseInt(selectedDate.firstMonth)">
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="clear">
                        <a-button type="primary" @click="selectDate">确定</a-button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: "timeRange",
        props: ['time_range', 'direction'],
        data() {
            return {
                isActive: false,
                years: [],
                months: [],
                selectedDate: {
                    firstYear: moment().format('Y年'),
                    firstMonth: moment().format('MM月'),
                    lastYear: moment().format('Y年'),
                    lastMonth: moment().format('MM月'),
                },
            }
        },
        created() {
            this.years = this.getYeas();
            this.months = this.getMonths();
            this.form = this.$form.createForm(this, {
                onFieldsChange: (_, changedFields) => {
                    this.$emit('change', changedFields);
                },
                mapPropsToFields: () => {
                    return {
                        time_range: this.$form.createFormField({
                            ...this.time_range,
                            value: this.time_range,
                        }),
                    };
                },
            });
        },
        watch: {
            time_range () {
                this.form.updateFields({
                    time_range: this.$form.createFormField({
                        ...this.time_range,
                        value: this.time_range,
                    }),
                });
            },
        },
        computed: {
            classObject: function () {
                return {
                    active: this.isActive
                }
            },
        },
        methods: {
            moment,
            openCalendar() {
                this.isActive = !this.isActive
            },
            getYeas() {
                let years = [];
                let currentYear = parseInt(moment().format('Y'));
                for (let i = 1; i <= 10; i++) {
                    years.push(currentYear - i)
                }
                years.sort();
                for (let i = 0; i < 5; i++) {
                    years.push(currentYear + i)
                }
                years.reverse();
                return years.map(function (item) {
                    return item += '年'
                });
            },
            getMonths() {
                let months = [];
                for (let i = 1; i <= 12; i++) {
                    if (i < 10) {
                        i = '0' + i;
                    }
                    months.push(i)
                }
                return months.map(function (item) {
                    return item += '月'
                });
            },
            handleFirstYear(value) {
                this.selectedDate.firstYear = value;
                if (value > this.selectedDate.lastYear) {
                    this.selectedDate.lastYear = value;
                }
                if (value === this.selectedDate.lastYear
                    && this.selectedDate.firstMonth > this.selectedDate.lastMonth) {
                    this.selectedDate.lastMonth = this.selectedDate.firstMonth
                }
            },
            handleFirstMonth(value) {
                this.selectedDate.firstMonth = value;
                if (this.selectedDate.lastYear === this.selectedDate.firstYear
                    && value > this.selectedDate.lastMonth) {
                    this.selectedDate.lastMonth = value;
                }
            },
            handleLastYear(value) {
                this.selectedDate.lastYear = value;
                if (value === this.selectedDate.firstYear
                    && this.selectedDate.firstMonth > this.selectedDate.lastMonth) {
                    this.selectedDate.lastMonth = this.selectedDate.firstMonth;
                }
            },
            handleLastMonth(value) {
                this.selectedDate.lastMonth = value
            },
            selectDate() {
                this.selectedDate.date = this.selectedDate.firstYear
                    + this.selectedDate.firstMonth
                    + '-'
                    + this.selectedDate.lastYear
                    + this.selectedDate.lastMonth;
                this.form.setFieldsValue({'time_range': this.selectedDate.date});
                this.isActive = false
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/scss/mixin.scss";

    .time-select {
        position: relative;
        @include fj(flex-start);

        .ant-input {
            cursor: pointer;
            color: $blue;

            &:read-only {
                border: none;
                background: transparent;
            }

            &:focus {
                border: none;
                -webkit-box-shadow: 0 0 0 0 #fff;
                box-shadow: 0 0 0 0 #fff
            }
        }

        .time-choose-calendar {
            &.left {
                right: 0;
                & > .arrow {
                    margin-left: 500px;
                }
            }
            position: absolute;
            top: 42px;
            z-index: 100;

            & > .arrow {
                margin-left: 35px;
                width: 0;
                height: 0;
                border-width: 0 10px 10px;
                border-style: solid;
                border-color: transparent transparent #394047;
            }

            .content {
                @include wh(580px, 150px);
                background-color: #394047;

                & > .select-content {
                    padding: 30px;
                    @include fj(space-between);
                    .horizontal-line {
                        @include fj();
                        align-items: center;
                    }
                    & > .ant-select {
                        width: 110px
                    }
                }

                .ant-btn {
                    float: right;
                    right: 30px
                }
            }
        }

        .slide-fade-enter-active {
            transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .slide-fade-leave-active {
            transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .slide-fade-enter, .slide-fade-leave-to {
            transform: translateY(10px);
            opacity: 0;
        }
    }
</style>